<template>
    <view class="uni-card"  v-if="activity.id">
        <view class="uni-card-header">
            <text>您的报名支付费用：{{activity.totalFee/100}} 元</text>
        </view>
        <view class="uni-card-content uni-card-content-pay-info">
            <view class="uni-card-content-inner">
                <view>
                    <view class="uni-title">
                        <text>活动标题：{{activity.title}}</text>
                    </view>
                    <view class="uni-title">
                        <text>活动开始时间：{{$utils.date.getDateWeek(activity.startTime)}}</text>
                    </view>
                    <view class="uni-title">
                        <text>活动结束时间：{{$utils.date.getDateWeek(activity.endTime)}}</text>
                    </view>

                    <view class="uni-title">
                        <text>活动地点：{{activity.address}}</text>
                    </view>

                    <view v-if="participateUserInfo">
                        <view class="uni-title">
                            <text>用户名：{{participateUserInfo.name}}</text>
                        </view>
                        <view class="uni-title">
                            <text>性别：
                                <StUniDictText type="gender" :val="participateUserInfo.genderDictId"></StUniDictText>
                            </text>
                        </view>
                        <view class="uni-title">
                            <text>手机号：{{participateUserInfo.mobile}}</text>
                        </view>
                        <view class="uni-title" v-if="participateUserInfo.idCardNo">
                            <text>身份证号：{{participateUserInfo.idCardNo}}</text>
                        </view>

                    </view>
                </view>
                <view>
                    <checkbox-group class="uni-flex" name="loves" @change="change">
                        <checkbox value="agreement" checked/>
                        <navigator url="/pages/agreement/agreement">
                            <text class="uni-link"> 活动相关协议</text>
                        </navigator>
                    </checkbox-group>
                </view>
            </view>
        </view>
        <view class=" fh-padding-30">
            <button v-if="activity.isNeedPayOnline" v-on:click="createOrder(false)"
                    :disabled="!agreement" type="primary"
                    :loading="payLoading">去支付
            </button>
            <button v-else v-on:click="createOrder(true)"
                    :disabled="!agreement" type="primary"
                    :loading="payLoading">线下支付报名
            </button>
        </view>
    </view>
</template>

<script>
    import payUtil from "../../utils/payUtil.js"

    import StUniDictText from '../../components/StUniDictText.vue'

    export default {
        components: {StUniDictText},
        data() {
            return {
                agreement: true,
                payLoading: false,
                activity: {
                },
                // 用户报名信息，从上个页面设置的localStaorage中取
                participateUserInfo: null,

              // 活动id上个页面传参数过来的
                activityId: null
            }
        },
        onShareAppMessage() {
            let self = this
            return {
                title: self.activity.title,
                path: '/pages/activity/detail?id=' + this.activityId
            }
        },
        onLoad(options) {
            this.activityId = options.activityId

            let userInfo = uni.getStorageSync('participate')

            if (userInfo && userInfo.activityId == options.activityId) {
                this.participateUserInfo = userInfo
              this.getDetail()
            } else {
                uni.showToast({
                    title: '数据错误，未能获取用户参与数据，请返回重新进入页面',
                    icon: 'none'
                });
            }

        },
        watch: {},
        methods: {
            change(e) {
                this.agreement = e.detail.value.length > 0
            },
            getDetail() {

                this.$http.get('/app/activity-pay/' + this.activityId,{params:{genderDictId:this.participateUserInfo.genderDictId}}).then(res => {

                    let content = res.data
                    this.activity = content
                })

            },
          /**
           *
           * @param offline 是否线下
           */
            // 下单
            createOrder(offline) {
                if (!this.agreement) {
                    uni.showToast({
                        title: "请同意相关活动协议后继续",
                        icon: 'none'
                    })
                    return
                }
                let payForm = {}
                //商品描述
                payForm.channelCode = 'wwdH5'
                payForm.title = this.activity.title
                payForm.description = this.activity.title
                payForm.totalAmount = this.activity.totalFee
                // 默认人民币，这里可以不填
                payForm.currencyDictValue = null,
                payForm.categoryDictValue = 'wwd_activity',
                payForm.payTypeDictValue = 'on_line_pay',
                payForm.payChannelDictValue = 'wx_jsapi',
                payForm.goodsForms = [
                    {
                        id: this.activity.id,
                        name: this.activity.title,
                        count: 1,
                        amount: this.activity.totalFee,
                        imageUrl: this.activity.titleUrl
                    }
                ],


                payForm.ext = this.participateUserInfo
                payForm.mpAppCode = this.$config.mpAppCode

                if (this.payLoading) return

                this.payLoading = true
                uni.showLoading({title: '报名中...'})
                this.$http.post('/order/create', payForm).then(response => {
                    uni.hideLoading()
                    let content = response.data
                    if(offline){
                      uni.showToast({
                        duration: 3000,
                        title: "线下支付报名成功",
                        icon: 'none'
                      })
                    }else {
                      this.doPay(content.ext.orderWx.prepayId)
                    }
                }).catch(error => {
                    uni.showToast({
                        duration: 3000,
                        icon: 'none',
                        title: error.data.errorMsg
                    })
                    this.payLoading = false
                }).finally(() => {
                  uni.hideLoading()
                })
            },
          // 下单成功后调起微信支付弹窗支付
            doPay(prepayId) {
                let param = {
                    appCode: this.$config.mpAppCode,
                    prepayId: prepayId,
                    payChannelDictValue: 'wx_jsapi'
                }
                this.$http.get('/pay/wx/paySign', {params: param}).then(res => {
                    // 调起微信支付
                    payUtil.onBridgeReady(res.data,  (res)=> {

                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            uni.showToast({
                                duration: 3000,
                                title: "支付成功",
                                icon: 'none'
                            })
                            setTimeout(()=>{
                                // 成功后，返回活动详情
                                uni.navigateBack({
                                    delta: 2
                                });
                            },1000)
                        }else if(res.err.msg == 'get_brand_wcpay_request:cancel'){
                          // 用户取消，调用订单状态接口关闭订单
                          this.payLoading = false

                        }
                    })
                })
                    .catch(error => {
                        uni.showToast({
                            icon: 'none',
                            title: error.data.errorMsg
                        })
                    })
            },
        }
    }
</script>

<style>
    .uni-card {
        width: 100%;
    }

    .uni-card-content-pay-info .uni-title {
        padding: 1px 0 !important;
    }
</style>
